<template>
	<view class="content">
		<view class="new-head">
			<AllHeads :type="type" @click="back(1)" style="width: 33%;"></AllHeads>
			<view class="all-title">
				<text class="title-p" v-for="item, index in tab" :key="index" v-if="deta.orderStatus == index"
					:class="deta.orderStatus  == 1 ? 'word': '' ">{{ item.title }}</text>
			</view>
			<view class="" style="width: 33%;">

			</view>
		</view>
		<view class="cancelTitle" v-if="deta.orderStatus==5">
			{{deta.cancelType==1?'用户超时未支付自动取消':'您已取消订单'}}
		</view>

		<view class="pay-time" v-if="deta.orderStatus==1">
			<view class="icon">
				<image src="../../static/allOrders/clock.png" mode=""></image>
			</view>
			<view class="left">
				支付剩余：
			</view>
			<view class="right">
				<u-count-down :time="timeUpdate" format="mm:ss" @finish="getDetail" @change="onChangeCD">
					<view class="time">
						<!-- <text class="time__item">{{ timeData.days }}&nbsp;天</text> -->
						<!-- <text class="time__item">{{ timeData.hours>10?timeData.hours:'0'+timeData.hours}}&nbsp;时</text> -->
						<text class="time__item">{{ timeData.minutes }}分</text>
						<text class="time__item">{{ timeData.seconds }}秒</text>
					</view>
				</u-count-down>
			</view>
		</view>
		<view class="all-nav">

			<view class="nav-right">
				<!-- #ifdef APP-PLUS -->
				<text class="left-btn" @click="openAuth('CALL_PHONE')">联系商家</text>
				<!-- #endif  -->

				<!-- #ifndef APP-PLUS -->
				<text class="left-btn" @click="takeCall">联系商家</text>
				<!-- #endif  -->
				<text class="left-btn" v-if="deta.orderStatus == 1" @click="onCancel">取消支付</text>
				<text class="right-btn" v-if="deta.orderStatus == 1" @click="goPay">立即支付</text>
				<text class="right-btn" v-if="deta.orderStatus == 3" @click="onTOver">确认收货</text>
			</view>
		</view>

		<!-- <view class="all-nav-show" v-else>
			<view class="nav-left-show">
				<uni-icons class="left-icon" size="30" type="headphones" color="#7f7f7f"></uni-icons>
				<text class="left-p" @click="callPhone">联系商家</text>
			</view>
		</view> -->

		<view class="all-delivery" v-if="deta.orderStatus==3||deta.orderStatus==4">
			<view class="delivery-top">
				<!-- <uni-icons type="navigate" size="24"></uni-icons> -->
				<image src="../../static/allOrders/logis.png" style="width: 40rpx;height: 40rpx;display: block;"
					mode=""></image>
				<text class="top-ivon">物流信息</text>
			</view>
			<view class="delivery-bottom">
				<view class="bottom-box" v-if="deta.expressList" style="padding-left: 10rpx;">
					<view class="bottom-box-item" v-for="(item1,index1) in deta.expressList" :key="item1.id">
						<text class="box-Wtext">快递公司 <text class="word">{{item1.logisticsFirm}}</text> </text>
						<view class="box-word">
							<text class="word-Ntext">快递单号 <text class="word">{{item1.logisticsNo}}</text> </text>
							<text class="word-copy" @click="copyUrl(item1.logisticsNo)">复制</text>
						</view>
					</view>
				</view>
				<view class="bottom-box" v-else>
					<text class="box-Ttext">配送说明: <text class="word">{{deta.remark}}</text> </text>
				</view>
			</view>
		</view>

		<view class="all-list">
			<view class="list-top">
				<uni-icons class="top-icon" size="20" type="shop" color="#7f7f7f"></uni-icons>
				<text class="top-p">{{ deta.storeName }}</text>
			</view>

			<view class="list-lists">
				<ul class="lists-ul">
					<li class="ul-leis" v-for="item, index in deta.orderItemVOS">
						<view class="leis-left">
							<image class="left-images" :src="item.gooodsImg" mode=""></image>
						</view>
						<view class="leis-right">
							<text class="right-p">{{item.goodsName}}</text>
							<view class="right-word">
								<text class="word-Stext"> <text class="small">x</text> {{item.count}}
								</text>
								<text class="word-Stext">￥{{item.payPrice/100}}</text>
							</view>
						</view>
					</li>
				</ul>
			</view>

			<view class="lists-money">
				<text class="money-Btext">配送费</text>
				<text class="money-Btext">￥0</text>
			</view>

			<view class="lists-all">
				<text class="all-all">总计</text>
				<text class="all-allmoney"> <text class="all-small">￥</text> <text
						class="money">{{deta.goodsPrice/100}}</text> </text>
			</view>
		</view>

		<view class="all-address">
			<view class="address-top">
				<text class="top-left">收货地址</text>
				<text class="top-right">{{deta.addressVO?deta.addressVO.area:'' }}
					{{ deta.addressVO?deta.addressVO.detail:''}}
				</text>
			</view>
			<view class="address-bottom">
				<text></text>
				<text class="bottom-person">{{deta.addressVO?deta.addressVO.contacts:''}}
					{{ deta.addressVO?deta.addressVO.phone:''}}</text>
			</view>
		</view>

		<view class="all-time">
			<view class="time-top">
				<text class="top-left">订单号码</text>
				<text class="top-right">{{deta.orderNo}}</text>
			</view>
			<view class="time-bottom">
				<text class="bottom-left">下单时间</text>
				<text class="bottom-right">{{deta.createTime}}</text>
			</view>
			<view class="time-bottom" v-if="deta.orderStatus != 1&&deta.orderStatus != 5">
				<text class="bottom-left">支付方式</text>
				<text class="bottom-right">{{deta.payType == 1 ? '微信' : deta.payType == 2 ? '支付宝' :'余额'}}</text>
			</view>
			<view class="time-bottom" v-if="deta.orderStatus == 4">
				<text class="bottom-left">成交时间</text>
				<text class="bottom-right">{{deta.finishTime}}</text>
			</view>
			<view class="time-bottom" v-if="deta.orderStatus == 5">
				<text class="bottom-left">取消时间</text>
				<text class="bottom-right">{{deta.cancelTime}}</text>
			</view>
		</view>

		<view class="user-popup" v-show="up" @click="hide">
			<view class="popup-box">
				<image class="box-image" src="" mode=""></image>
				<text class="box-p">{{phone}}</text>
				<view class="box-btn">
					<text class="btn-Nbtn" @click="hide">取消</text>
					<text class="btn-Obtn" @click="takeCall">拨打</text>
				</view>
			</view>
		</view>

		<view class="all-empty">

		</view>
		<u-overlay :show="modalShow" @click="modalShow = false">
			<view class="warp">
				<!-- <view class="rect" @tap.stop></view> -->
				<view class="followConfirm" @tap.stop>
					<view class="txt">
						这么好的商品确定不买了吗？
					</view>
					<view class="switch">
						提交后，将订单商品放回购物车中
						<u-switch v-model="isPutBackCarts" :activeValue="1" :inactiveValue="2" activeColor="#FE2C55"
							inactiveColor="#EDEDED" size="20" @change="changeSwitch"></u-switch>
					</view>
					<view class="btnGroup">
						<view class="btn cancel" @click="modalShow = false">
							我再想想
						</view>
						<view class="btn confirm" @click="onCancelPay">
							确定
						</view>
					</view>
				</view>
			</view>
		</u-overlay>

		<!-- 商品下架提醒 -->
		<OffShelf ref="OffShelf"></OffShelf>
		<permission-popup ref="authpup" type="top" @changeAuth="changeAuth"
			:permissionID="permissionID"></permission-popup>
	</view>
</template>

<script>
	import permissionPopup from "@/components/permission-popup/permission-popup";
	import {
		// confrim,
		orderReceive,
		takePhone,
		orderDetail,
		orderCancel,
		isAddCart
	} from '../../api/apia'

	import {
		payAppSubmit
	} from "@/api/apis.js"

	import {
		callPhone
	} from '@/mixin/common.js'
	import {
		fetchData
	} from "@/utils/allPay.js"
	// import permision from "@/js_sdk/wa-permission/permission.js"
	export default {
		mixins: [callPhone],
		components: {
			permissionPopup
		},
		data() {
			return {
				type: 'arrow-left',
				permissionID: "",
				tab: [{
						title: '全部'
					},
					{
						title: '待支付',
						// background: '#f34a34'
					},
					{
						title: '待发货'
					},
					{
						title: '待收货'
					},
					{
						title: '已完成'
					},
					{
						title: '已取消'
					},
				],
				up: false,
				show: false,
				deta: {
					addressVO: {}
				},
				orderId: 1,
				timeUpdate: null,
				modalShow: false,
				isPutBackCarts: 1,
				timeData: {},
			}
		},
		onLoad(val) {
			this.orderId = val.id
			this.getDetail()

		},
		mounted() {},
		methods: {
			copyUrl(logisticsNo) {
				uni.setClipboardData({
					data: logisticsNo,
					success: function() {
						uni.showToast({
							title: '复制成功',
							icon: 'none'
						})
					}
				})
			},
			onChangeCD(e) {
				this.timeData = e
			},
			changeSwitch(e) {
				console.log(e, 'eee')
			},
			getDetail() {
				orderDetail(this.orderId).then(res => {
					let orderItemVOS = res.result.orderItemVOS

					for (var i = 0; i < orderItemVOS.length; i++) {
						orderItemVOS[i].gooodsImg = JSON.parse(orderItemVOS[i].goodsUrl)[0]
					}
					res.result.orderItemVOS = orderItemVOS
					this.deta = res.result
					this.timeUpdate = Number(this.deta.timeDiff) * 1000

				})
			},
			back() {
				uni.redirectTo({
					url: "/pages/orders/orders"
				})
			},

			hide() {
				this.up = false
			},

			openAuth(permissionID) {
				if (plus.os.name == 'Android') {
					this.permissionID =
					permissionID; //这个是对应的权限 ACCESS_FINE_LOCATION 位置权限 / WRITE_EXTERNAL_STORAGE 存储空间/照片权限 / CAMERA相机权限 / CALL_PHONE 拨打电话
					setTimeout(() => {
						this.$refs['authpup'].open();
					}, 500)
				} else {
					this.takeCall()
				}
			},

			//用户授权权限后的回调
			changeAuth() {
				//这里是权限通过后执行自己的代码逻辑
				console.log('权限已授权，可执行自己的代码逻辑了');
				this.takeCall() //调用功能
			},

			takeCall() {
				const phone = this.deta.phone;
				uni.makePhoneCall({
					phoneNumber: phone,
					success: function() {
						console.log('拨打电话成功');
					},
					fail: function(error) {
						console.error('拨打电话失败：', error);
						uni.showToast({
							title: '拨打电话失败',
							icon: 'none'
						});
					}
				});

				// // #ifdef APP-PLUS
				// uni.getSystemInfo({
				// 	success: (res) => {
				// 		console.log("手机型号：" + res.platform)
				// 		if (res.platform == 'ios') {
				// 			uni.makePhoneCall({
				// 				phoneNumber: phone, // 电话号码
				// 				success: function() {
				// 					console.log('拨号成功');
				// 				},
				// 				fail: function(err) {
				// 					console.log('拨号失败：', err);
				// 				}
				// 			});
				// 		} else {
				// 			plus.android.requestPermissions(
				// 				["android.permission.CALL_PHONE"],
				// 				function(resultObj) {
				// 					var result = 0;
				// 					for (var i = 0; i < resultObj.granted.length; i++) {
				// 						var grantedPermission = resultObj.granted[i];
				// 						console.log('已获取的权限：' + grantedPermission);
				// 						result = 1
				// 					}
				// 					for (var i = 0; i < resultObj.deniedPresent.length; i++) {
				// 						var deniedPresentPermission = resultObj.deniedPresent[i];
				// 						console.log('拒绝本次申请的权限：' + deniedPresentPermission);
				// 						result = 0
				// 					}
				// 					for (var i = 0; i < resultObj.deniedAlways.length; i++) {
				// 						var deniedAlwaysPermission = resultObj.deniedAlways[i];
				// 						console.log('永久拒绝申请的权限：' + deniedAlwaysPermission);
				// 						result = -1
				// 					}
				// 					console.log(result);
				// 					if (result == 1) {
				// 						uni.makePhoneCall({
				// 							phoneNumber: phone,
				// 							success: function() {
				// 								console.log('拨打电话成功');
				// 							},
				// 							fail: function(error) {
				// 								console.error('拨打电话失败：', error);
				// 								uni.showToast({
				// 									title: '拨打电话失败',
				// 									icon: 'none'
				// 								});
				// 							}
				// 						});
				// 					} else {
				// 						uni.showModal({
				// 							title: '提示',
				// 							content: '拨号权限拒绝，是否前往开启权限',
				// 							success: (res) => {
				// 								if (res.confirm) {
				// 									// 弹出提示框解释为何需要读写手机储存权限，引导用户打开设置页面开启
				// 									var main = plus.android
				// 										.runtimeMainActivity();
				// 									var Intent = plus.android.importClass(
				// 										"android.content.Intent");
				// 									//直接进入应用列表的权限设置
				// 									var mIntent = new Intent(
				// 										'android.settings.APPLICATION_SETTINGS'
				// 									);
				// 									main.startActivity(mIntent);
				// 								} else if (res.cancel) {
				// 									console.log('用户点击取消');
				// 								}
				// 							}
				// 						});

				// 					}
				// 				},
				// 				function(error) {
				// 					console.log('申请权限错误：' + error.code + " = " + error.message);
				// 				}
				// 			);
				// 		}
				// 	}
				// })

				// // #endif
			},



			// 确认收货
			onTOver() {
				uni.showModal({
					title: '收货提醒',
					content: '是否签收？',
					cancelColor: "#aaaaaa",
					confirmColor: "#FE2C55",
					success: (res) => {
						if (res.confirm) {
							orderReceive(this.orderId).then(res => {
								console.log("支付失败", res);
								if (res.success) {
									uni.showToast({
										title: '签收成功',
										icon: 'success'
									});
									this.getDetail()
								} else {
									uni.showToast({
										title: '签收失败',
										icon: 'none'
									});
								}
							})
						} else if (res.cancel) {

						}
					}
				});

			},
			// con() {
			// 	orderReceive(this.orderId).then(res => {
			// 		console.log(res);
			// 	})
			// },
			onCancelPay() {
				// return
				let params = {
					orderId: this.deta.id,
					cancelType: 2
				}
				let param = {
					orderId: this.deta.id,
					isAdd: this.isPutBackCarts
				}
				isAddCart(param).then(res => {
					console.log(res);
					if (res.success) {} else {}
				})
				orderCancel(params).then(res => {
					console.log(res);
					if (res.success) {
						this.modalShow = false
						uni.showToast({
							title: '取消成功',
							icon: 'success'
						});
						this.getDetail()
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none',
							duration: 2000, //提示的延迟时间，单位毫秒，默认：1500
							mask: true, // 是否显示透明蒙层， 防止触摸穿透， 默认： false
							// image:'./image.png',//自定义图标的本地路径
						});
					}
				})
			},
			// 取消支付
			onCancel() {
				console.log(this.deta);
				// uni.showModal({
				// 	title: '温馨提醒',
				// 	content: '是否取消订单？',
				// 	cancelColor: "#aaaaaa",
				// 	confirmColor: "#FE2C55",
				// 	success: (res) => {
				// 		if (res.confirm) {
				this.modalShow = true


				// 		} else if (res.cancel) {

				// 		}
				// 	}
				// });
			},

			// 支付
			async goPay() {
				let payApp = {
					"orderNo": this.deta.orderNo,
					"payType": this.deta.payType
				}
				if (this.deta.payType == 2) {
					const response = await fetchData(payApp, this.deta.payType)
					// console.log("支付宝", response);
					if (response.code == 10060) { // 商品下架
						this.$refs.OffShelf.onExpireChange()
						// uni.showToast({
						// 	title: response.result || '支付失败',
						// 	icon: 'none',
						// 	duration: 2000, //提示的延迟时间，单位毫秒，默认：1500
						// 	mask: true, // 是否显示透明蒙层， 防止触摸穿透， 默认： false
						// 	// image:'./image.png',//自定义图标的本地路径
						// });
					} else if (!response.success || response.errCode) {
						uni.showToast({
							title: response.message || '支付失败',
							icon: 'none',
							duration: 2000, //提示的延迟时间，单位毫秒，默认：1500
							mask: true, // 是否显示透明蒙层， 防止触摸穿透， 默认： false
							// image:'./image.png',//自定义图标的本地路径
						});
					} else if (response.channel.serviceReady) {
						uni.showToast({
							title: '支付成功',
							icon: 'success',
							duration: 2000, //提示的延迟时间，单位毫秒，默认：1500
							mask: true, // 是否显示透明蒙层， 防止触摸穿透， 默认： false
							// image:'./image.png',//自定义图标的本地路径
						});

						setTimeout(() => {
							this.getDetail()
						}, 2000)
					}
				} else {
					const response = await fetchData(payApp, this.deta.payType)
					// console.log("微信", response);
					if (!response.success || response.errCode) {
						uni.showToast({
							title: response.message || '支付失败',
							icon: 'none',
							duration: 2000, //提示的延迟时间，单位毫秒，默认：1500
							mask: true, // 是否显示透明蒙层， 防止触摸穿透， 默认： false
							// image:'./image.png',//自定义图标的本地路径
						});

					}
					if (response.channel.serviceReady) {
						uni.showToast({
							title: '支付成功',
							icon: 'success',
							duration: 2000, //提示的延迟时间，单位毫秒，默认：1500
							mask: true, // 是否显示透明蒙层， 防止触摸穿透， 默认： false
							// image:'./image.png',//自定义图标的本地路径
						});
						setTimeout(() => {
							this.getDetail()
						}, 2000)
					}
				}
			},

		},

	}
</script>

<style lang="scss">
	.user-popup {
		background-color: rgba(0, 0, 0, 0.5);
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 9999;
		display: flex;
		align-items: center;

		.popup-box {
			margin: 0 auto;
			background-color: #fff;
			height: 350rpx;
			width: 580rpx;
			border-radius: 20rpx;
			text-align: center;

			.box-image {
				width: 150rpx;
				height: 150rpx;
				border-radius: 50%;
				background-color: #ccc;
				margin-top: -75rpx;
			}

			.box-p {
				display: block;
				font-size: 35rpx;
				margin-top: 50rpx;
			}

			.box-btn {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 50rpx 40rpx 30rpx 40rpx;

				.btn-Nbtn {
					display: block;
					height: 84rpx;
					width: 240rpx;
					border: 2rpx solid #888888;
					border-radius: 15rpx;
					line-height: 84rpx;
					color: #888888;
				}

				.btn-Obtn {
					display: block;
					height: 84rpx;
					width: 240rpx;
					background: linear-gradient(to right, #ff2c28, #fd6e2b);
					border-radius: 15rpx;
					line-height: 84rpx;
					color: #fff;
				}
			}
		}
	}

	.all-empty {
		height: 100rpx;
	}

	.word {
		// color: #f34a34;
	}

	.content {
		padding: 25rpx 25rpx 0 25rpx;
		width: 100%;
		height: 100%;
		overflow-y: auto;
		// background: linear-gradient(to bottom, #ffebec, #f7f7f7 50%);
		background-color: #F6F7FB;
		// background-color: pink;
		margin-bottom: 0;
		padding-top: 25rpx;

		.new-head {
			width: 100%;
			padding: 50rpx 0 30rpx 0;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		.all-title {
			width: 33%;
			text-align: center;
			font-size: 45rpx;
			// font-weight: 600;
		}

		.cancelTitle {
			text-align: center;
			margin-bottom: 50rpx;
			color: #76787D;
			font-size: 29rpx;
		}

		.pay-time {
			// margin: 30rpx 0 50rpx 0;
			margin: 0rpx 0 50rpx 0;
			display: flex;
			align-items: center;
			justify-content: center;

			.icon {
				width: 40rpx;
				height: 40rpx;
				margin-right: 10rpx;

				image {
					width: 100%;
					height: 100%;
					display: block;
				}
			}

			.left {

				// font-size: 29rpx;
			}

			.right {

				// color: #FE2C55;
				::v-deep .u-count-down__text {
					color: #FE2C55;
					// font-size: 29rpx;
				}

				.time {
					color: #FE2C55;
				}
			}
		}

		.all-delivery {
			background-color: #fff;
			padding: 30rpx;
			border-radius: 20rpx;
			margin-top: 20rpx;

			.delivery-top {
				display: flex;
				align-items: center;

				.top-ivon {
					font-size: 30rpx;
					margin-left: 15rpx;
					margin-top: -4rpx;
					font-weight: 600;
				}
			}

			.delivery-bottom {
				// background-color: #f7f7f7;
				margin-top: 20rpx;
				// padding: 20rpx;
				border-radius: 5rpx;

				.bottom-box {
					box-sizing: border-box;

					.bottom-box-item {
						margin-bottom: 30rpx;

						&:last-of-type {
							margin-bottom: 0;
						}
					}

					.box-Wtext {
						color: #7E8081;
						font-size: 28rpx;

						.word {
							// color: #7E8081;
							color: #000;
							// font-weight: 600;
							margin-left: 15rpx;
						}
					}

					.box-Ttext {
						color: #7E8081;
						font-size: 28rpx;

						.word {
							// color: #7E8081;
							color: #000;
							// font-weight: 600;
							margin-left: 15rpx;
						}
					}

					.box-word {
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin: 15rpx 0 0 0;

						.word-Ntext {
							width: 500rpx;
							white-space: nowrap;
							/* 防止文本换行 */
							overflow: hidden;
							/* 隐藏超出容器的部分 */
							text-overflow: ellipsis;
							/* 显示省略号 */
							// overflow: hidden;
							color: #7E8081;
							font-size: 28rpx;

							.word {
								// color: #7E8081;
								color: #000;
								// font-weight: 600;
								margin-left: 15rpx;
							}
						}

						.word-copy {
							font-weight: 600;
							font-size: 30rpx;
						}
					}
				}
			}
		}

		.all-nav {
			display: flex;
			justify-content: flex-end;
			align-items: center;
			background-color: #fff;
			padding: 20rpx 30rpx 50rpx 30rpx;
			// border-radius: 20rpx;
			// margin-top: 70rpx;
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			margin: auto;


			// .nav-left {
			// 	text-align: center;
			// 	color: #7f7f7f;

			// 	.left-p {
			// 		display: block;
			// 		font-size: 22rpx;
			// 	}
			// }

			.nav-right {
				display: flex;

				.right-btn {
					background: linear-gradient(to right, #FF4D6F, #FE2C55);
					height: 65rpx;
					width: 180rpx;
					display: block;
					color: #fff;
					text-align: center;
					line-height: 65rpx;
					font-size: 25rpx;
					border-radius: 10rpx;
					box-sizing: border-box;
				}

				.left-btn {
					// background: rgba(100, 100, 100, 0.4);
					box-sizing: border-box;
					border: 1px solid #9F9F9F;
					margin-right: 10px;
					height: 65rpx;
					width: 140rpx;
					display: block;
					// color: #fff;
					text-align: center;
					line-height: 65rpx;
					font-size: 25rpx;
					border-radius: 10rpx;
				}
			}
		}

		.all-nav-show {
			display: flex;
			justify-content: space-between;
			align-items: center;
			background-color: #fff;
			padding: 20rpx 30rpx;
			border-radius: 20rpx;
			margin-top: 70rpx;


			.nav-left-show {
				margin: 0 auto;
				text-align: center;
				color: #7f7f7f;

				.left-p {
					display: block;
					font-size: 22rpx;
				}
			}

			.nav-right {
				.right-btn {
					background: linear-gradient(to right, #ff2c28, #fd6e2b);
					height: 60rpx;
					width: 140rpx;
					display: block;
					color: #fff;
					text-align: center;
					line-height: 60rpx;
					font-size: 25rpx;
					border-radius: 10rpx;
				}
			}
		}

		.all-list {
			font-weight: 700;
			width: 100%;
			padding: 30rpx 22rpx;
			background-color: #fff;
			margin-top: 20rpx;
			border-radius: 20rpx;

			.list-top {
				display: flex;
				align-items: center;

				.top-p {
					font-size: 27rpx;
					margin-left: 5rpx;
				}
			}

			.list-lists {
				margin-left: -80rpx;
				// font-weight: 550;
				width: 100%;

				.lists-ul {
					list-style: none;
					width: 100%;

					.ul-leis {
						display: flex;
						// align-items: center;
						padding: 30rpx 0;
						// width: 100%;

						.leis-left {
							width: 20%;

							.left-images {
								width: 120rpx;
								height: 120rpx;
								border-radius: 10rpx;
								background-color: #ccc;
								// margin-right: 20rpx;
							}
						}

						.leis-right {
							width: 80%;

							.right-p {
								font-size: 30rpx;
							}

							.right-word {
								display: flex;
								justify-content: space-between;
								align-items: center;
								margin-top: 35rpx;
								font-size: 28rpx;

								.word-Stext {
									.small {
										font-size: 25rpx;
									}
								}
							}
						}
					}
				}
			}

			.lists-money {
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 25rpx;
				border-bottom: 1rpx solid #f7f7f7;
				padding-bottom: 25rpx;
			}

			.lists-all {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 35rpx;

				.all-allmoney {
					.all-small {
						font-size: 20rpx;
					}

					.money {
						// font-weight: ;
					}
				}
			}
		}

		.all-address {
			margin-top: 20rpx;
			background-color: #fff;
			border-radius: 20rpx;
			padding: 40rpx 20rpx;

			.address-top {
				display: flex;
				justify-content: space-between;

				.top-left {
					width: 50%;
					font-size: 26rpx;
					color: #9a9cac;
				}

				.top-right {
					// width: 50%;
					font-size: 28rpx;
					// font-weight: 550;

				}
			}

			.address-bottom {
				display: flex;
				justify-content: right;
				margin-top: 20rpx;

				.bottom-person {
					// width: 50%;
					font-size: 28rpx;
					// margin-top: 20rpx;
				}
			}
		}

		.all-time {
			margin-top: 20rpx;
			margin-bottom: 100rpx;
			background-color: #fff;
			border-radius: 20rpx;
			padding: 40rpx 20rpx;

			.time-top {
				display: flex;
				justify-content: space-between;

				.top-left {
					// width: 50%;
					font-size: 26rpx;
					color: #9a9cac;
				}

				.top-right {
					// width: 50%;
					font-size: 28rpx;
					// font-weight: 550;
				}
			}

			.time-bottom {
				display: flex;
				justify-content: space-between;
				margin-top: 15rpx;

				.bottom-left {
					// width: 50%;
					font-size: 26rpx;
					color: #9a9cac;
				}

				.bottom-right {
					// width: 50%;
					font-size: 28rpx;
					// font-weight: 550;
				}
			}
		}

		.warp {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 100%;

			.followConfirm {
				width: 70%;
				// height: 250rpx;
				padding: 45rpx 45rpx;
				background-color: #fff;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				border-radius: 20rpx;

				.txt {
					text-align: center;
					margin-bottom: 45rpx;
				}

				.switch {
					font-size: 22rpx;
					margin-bottom: 50rpx;
					display: flex;
					align-items: center;

					::v-deep .u-switch {
						width: 70rpx !important;
						height: 44rpx !important;
						padding: 0rpx 7rpx 0rpx 0 !important;
						margin-left: 10rpx !important;
						// align-items: center !important;
						border-radius: 150rpx !important;
						transition: 0.4s all !important;

						.u-switch__node {
							display: block !important;
							width: 30rpx !important;
							height: 30rpx !important;
							transform: translateX(-25rpx) !important;
							background: #97989C !important;
							transition: 0.4s all !important;
						}

						.u-switch__node--on {
							transform: translateX(0rpx) !important;
							background-color: #fff !important;
							transition: 0.4s all !important;
						}
					}
				}

				.btnGroup {
					display: flex;
					align-items: center;
					justify-content: space-between;
					width: 100%;

					.btn {
						padding: 18rpx 0rpx;
						border-radius: 35rpx;
						border: 0;
						font-size: 26rpx;
						width: 46%;
						text-align: center;
					}

					.cancel {
						background-color: #EDEDED;
						color: #4D4D4D;
					}

					.confirm {
						background-image: linear-gradient(to right, #FF4C6E, #FE2C55);
						color: #fff;
					}
				}
			}
		}
	}
</style>